<template>
    <div class="bottom-bar" @click.stop>

        <div class="model-icon" v-for="(item,key) in btns" @click="jumPage" :data-key="key">
            <image style="width: 48px;height: 48px;" :src="iconSrc(item.icon)"></image>
            <text :style="fontStyle(item.key)">{{item.text}}</text>
        </div>
    </div>
</template>

<style scoped>

    .bottom-bar {
        position: absolute;
        bottom: 0px;
        height: 100px;
        width: 750px;
        flex-direction: row;
        /*background-color: white;*/
        background-color: white;
        border-top-width:1px;
        border-top-color: #cbcbcb;
    }

    .model-icon {
        width: 187px;
        border-width: 1px;
        align-items: center;
        justify-content: center;
        border-width: 1px;
        border-color: white;
    }
</style>

<script>

    var nav = weex.requireModule('navigator')

    var imgPrefix = 'root:img/indexIcon/'


    export default {
        props:{
            activeKey:{
                type:Number
            }
        },
        data () {
            return {
                btns: [
                    {
                        icon: 'un-home.png',
                        text: '首页',
                        key: 'home',
                        url: 'root:com/yx/index.js',
                    },
                    {
                        icon: 'un-customer.png',
                        text: '客户',
                        key: 'customer',
                        url: ''
                    },
                    {
                        icon: 'un-address.png',
                        text: '通讯录',
                        key: 'address',
                        url: 'root:com/yx/address/address.js'
                    },
                    {
                        icon: 'un-user.png',
                        text: '我的',
                        key: 'my',
                        url: ''
                    }
                ]
            }
        },

        computed:{

        },
        methods:{

            //图标的路径
            iconSrc (img) {
                return imgPrefix+img
            },

            //设置字体的样式
            fontStyle(key) {
                if(this.activeKey == key) {
                    return {color:'#00c470'}
                }
            },

            //跳转页面
            jumPage(event){

                var item = this.btns[event.target.attr.dataKey]


                if(item.key == this.activeKey) {
                    return
                }



                nav.push(item.url,e=>{
                    console.info(e)
                })
            }
        },
        mounted() {
            var key = 'home'
            if(this.activeKey){
                key = this.activeKey
            }
            for(let i in this.btns){
                var item = this.btns[i]
                if(item.key == key) {
                    Vue.set(item, 'icon', item.icon.replace('un-',''))
                }
            }
        }
    }
</script>